<template>
	<view class="pay">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="新增缴费" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body wrap">
			<!-- 新增缴费 -->
			<view class="uni-flex-center" style="width: 98%; margin-left: 1%;">
				<view class="title">
					<view style="float: left; margin-left: 20rpx;">
						<u-icon name="https://resourse.cnlhjt.com/upload/20220825/ba9facbb544dfa8fd2354249d9f02fda.png" size="22" label="物业费"></u-icon>
					</view>
					<view style="float: right;margin-right: 20rpx;">
						<u-icon name="map" size="18" label="兰州"></u-icon>
					</view>

				</view>

				<view style="clear: both;"></view>
				<view class="main-service uni-cell-90">

					<view class="user-list">
						<view class="user-list-cell">

							<view
								style="width: 100%; background-color: #FFFFFF; border-radius: 15rpx;padding-bottom: 180rpx; margin-top: 20rpx;">
								<u-cell-group :border="false">
									<u-cell icon="https://resourse.cnlhjt.com/upload/20220825/651206a7d0688d69f6448bb5c016854c.png" :title="house" :border="false" isLink @click="showFloor = true;"></u-cell>
								</u-cell-group>

								<u-gap height="10" bgColor="#eeeeee"></u-gap>
								<view style="margin-top: 15rpx; margin-left: 15rpx;">
									待缴费用
								</view>

								<u-action-sheet :show="showFloor" :actions="actionsFloor" title="请选择楼号"
									@close="showFloor = false" @select="floorSelect">
								</u-action-sheet>
								
								<view v-if="!proFee[id]">
									<u-empty :show="true" mode="order" icon="http://cdn.uviewui.com/uview/empty/order.png">
									</u-empty>
								</view>
								<view v-for="(item, index) in proFee[id]"
									style="border: 1rpx solid #E1E1E1; padding: 20rpx; margin-top: 20rpx; border-radius: 20rpx;">
									<view>

										<view class="checkbox-box" @tap="selected(index)">

											<text style="width: 90%; color: #999999;">{{item.time}}</text>
											<view class="checkbox">
												<view :class="[item.check?'on':'']"></view>
											</view>
										</view>
									</view>

									<view style="width: 100%; padding-top: 10rpx;padding-bottom: 10rpx;">
										<text style="color: #666666;">缴费总计</text>
										<text style="color: red; float: right">￥{{item.total_price}}元</text>
									</view>
									<u-line dashed></u-line>
									<view style="width: 90%;margin-left: 2%;">
										<text style="color: #333;font-size: 28rpx;font-weight: bold;">费用详情</text>
									</view>
									<view style="width: 90%;margin-left: 5%;font-size: 26rpx;">
										<text style="color: #696969;">住宅物业服务费</text>
										<text style="color: #696969; float: right">￥{{item.price}}</text>
									</view>
									<view style="width: 90%;margin-left: 5%;font-size: 26rpx;">
										<text style="color: #666666;">代收公摊电费</text>
										<text style="color: #696969; float: right">￥{{item.public_price}}</text>
									</view>
									<view style="width: 90%;margin-left: 5%;font-size: 26rpx;">
										<text style="color: #666666;">生活垃圾清运费</text>
										<text style="color: #696969; float: right">￥{{item.rubbish_price}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="uni-cell-90" style="">
				<view class="iconType2">
					<view class="checkbox-box" @tap="allSelect">
						<view class="checkbox">
							<view :class="[isAllselected?'on':'']"></view>
						</view>
						<view class="text">全选</view>
					</view>
					<view class="text1" v-if="myFee.length>0">
						￥ {{myFee[id]}} 元
					</view>
					<view class="text1" v-else>
						￥ 0 元
					</view>
					<view class="text2" @click="confimPay">
						立即缴费
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPropertyFee,
		createOrder
	} from "@/service/propertyService.js";
	import { getFloor } from '@/service/userService.js';
	export default {
		data() {
			return {
				house: '选择房产',
				id: 0,
				showFloor: false,
				actionsFloor: [],
				myFee: [],
				proFee: [],
				selectFeeList: [],
				isAllselected: true
			}
		},
		onLoad() {
			getFloor().then(this.getHouse);
			getPropertyFee().then(this.getPropertyFee);
		},
		methods: {
			getPropertyFee(e) {
				if (e.code == 200) {
					// this.actionsFloor = e.result.house;
					this.id = e.result.house[0].id;
					this.house = e.result.house[0].name;
					this.myFee = e.result.total;
					this.proFee = e.result.data;
					this.selectFeeList = this.proFee[this.id];
				}
			},
			getHouse(e) {
				if (e.code == 200) {
					this.actionsFloor = e.result;
				}
			},
			floorSelect(e) {
				this.house = e.name;
				this.id = e.id;

				this.selectFeeList = this.proFee[this.id];
			},
			selected(index) {
				let proFeeList = this.proFee;
				this.proFee[this.id][index].check = proFeeList[this.id][index].check ? false : true;
				let all = true;
				this.proFee[this.id].forEach((item, index) => {
					if (item.check == false) {
						all = false;
					}
				})
				this.isAllselected = all;
				this.sum();
			},
			allSelect() {
				let len = this.proFee[this.id].length;
				for (let i = 0; i < len; i++) {
					this.proFee[this.id][i].check = this.isAllselected ? false : true;
				}

				this.isAllselected = this.isAllselected ? false : true;
				this.sum();
			},
			sum() {
				let len = this.proFee[this.id].length;
				let sumPrice = 0;
				this.proFee[this.id].forEach((item, index) => {
					if (item.check == true) {
						sumPrice += parseFloat(item.total_price);
					}
				})
				this.myFee[this.id] = sumPrice.toFixed(2);
			},
			success(e) {
				uni.showToast({
					title: '支付成功',
					icon: "success",
					complete() {
						uni.navigateBack({
							delta: 2
						})
					}
				});
			},
			confimPay() {
				let par = {
					hid: this.id,
					param: this.proFee[this.id]
				}

				createOrder(par).then(res => {
					if (res.code == 200) {
						if (res.result == 'success') {
							uni.showToast({
								title: res.msg,
								icon: "success",
								complete() {
									uni.navigateBack({
										delta: 2
									})
								}
							});
						} else {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.result.timeStamp,
								nonceStr: res.result.nonceStr,
								package: res.result.package,
								signType: 'MD5',
								paySign: res.result.paySign,
								success: this.success,
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
								}
							});
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "error"
						});
					}
				})
			}
		},
	}
</script>

<style lang="scss">
	.title {
		margin-top: 40rpx;
		justify-content: space-between;
	}

	.l_title {
		font-size: 26rpx;
		color: #999999;
		margin-top: 15rpx;
	}

	.d_content {
		font-size: 32rpx;
		margin: 15rpx 10rpx 30rpx 10rpx;

	}

	.iconType2 {
		position: fixed;
		bottom: 60rpx;
		display: flex;
		border: #E1E1E1 1rpx solid;
		border-radius: 40rpx;
		justify-content: space-between;
		width: 94%;
		margin-left: 3%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #FFFFFF;

		.text1 {
			color: red;
			text-align: center;
			width: 50%;
		}

		.text2 {
			color: #FFFFFF;
			text-align: center;
			width: 30%;
			background-image: url("https://resourse.cnlhjt.com/upload/20220825/79b8644697f64c4b587f78e6d891f1e8.png");
			background-size: 100% 100%;
		}
	}

	.checkbox-box {
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		.checkbox {
			width: 35upx;
			height: 35upx;
			border-radius: 100%;
			border: solid 2upx #f06c7a;
			display: flex;
			justify-content: center;
			align-items: center;

			.on {
				width: 25upx;
				height: 25upx;
				border-radius: 100%;
				background-color: #f06c7a;
			}
		}

		.text {
			font-size: 28upx;
			margin-left: 10upx;
		}
	}
</style>
